@import "../../assets/style/common.less";
.pages-index {
  background: url("../../assets/image/index/index-bg.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
  height: 100%;
  width: 100%;

  .center {
    position: absolute;
    top: 8%;
    display: flex;
    flex-flow: row nowrap;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 517px;

    &-rotate {
      position: absolute;
      top: 57px;
      margin-left: 12px;
      width: 462px;
      height: 462px;
    }

    .logo {
      position: absolute;
      margin-top: -30px;
      margin-left: 12px;
      width: 250px;
      height: 93px;
      transform: scale(.9);
    }

    .data {
      position: absolute;
      color: white;
      font-size: 42px;
      margin-top: 112px;
      margin-left: 15px;
    }

    .line-dance-p {
      position: absolute;
      width: 100%;
      .display-flex;
      margin-top: 35px;
      box-sizing: border-box;
      padding-left: 62px;
      &--left {
        margin-right: 220px;
      }
      &--right {
        margin-left: 220px;
      }
    }

    .wg {
      position: absolute;
      margin-top: 32px;
      margin-left: -60px;
    }
  }
  .bottom {
    position: absolute;
    bottom: 8%;
    width: 100%;
    height: 400px;
    perspective: 200;
    // border: 1px solid red;
    div {
      cursor: pointer;
    }
    
    &--left {
      position: absolute;
      left: 10%;
      bottom: 30%;
      transform: scale(0.7);
    }
    &--right {
      position: absolute;
      left: 73%;
      bottom: 30%;
      transform: scale(0.7);
    }
    &--center {
      position: absolute;
      left: 50%;
      bottom: -40px;
      transform: translateX(-50%) scale(0.9);
    }

    &--left, &--right, &--center {
      width: 325px;
      height: 255px;
      .display-flex;
      transition: all 1s;

      &__bg {
        position: absolute;
        margin-top: -5px;
        left: 50%;
        transform: translateX(-50%);
      }

      &__title {
        position: absolute;
        margin-top: -38px;
        color: white;
        font-size: 36px;
      }
      &__value {
        position: absolute;
        margin-top: 30px;
        margin-left: 10px;
        color: white;
        font-size: 26px;
      }

      &__mask {
        position: absolute;
        margin-top: -2px;
        margin-left: -45px;
      }
    }
  }
}